<template>
  <div class="editInfo">
    <!-- 导航栏 -->
    <MMNavBar
      :title="title"
      :right-text="isEdit ? '保存' : ''"
      @onClickRight="saveEdit"
      @onClickLeft="back"
    ></MMNavBar>
    <div class="main-box">
      <!-- 输入框  文本类-->
      <van-field
        v-if="$route.query.prop !== 'avatar'"
        type="text"
        v-model="inputValue"
      />
      <!-- 上传组件 头像-->
      <van-uploader
        v-else
        :after-read="afterRead"
        v-model="fileList"
        :max-count="1"
      />
    </div>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState, mapMutations } from 'vuex'
// 导入api
import { editUserInfo, uploadFiles } from '../../api/user'
export default {
  name: 'editInfo',
  data () {
    return {
      // 输入框绑定的数据
      inputValue: '',
      // 绑定的标题
      title: '',
      // 预览的图片
      fileList: [{ url: '' }],
      // 头像地址
      avatarUrl: ''
    }
  },
  computed: {
    // 合并用户信息 简化获取
    ...mapState(['userInfo']),
    // 是否修改了
    // true 修改了
    // false 没有修改
    isEdit () {
      // 文本的 通过url中的值 获取对应的数据
      // 初始值  蜡笔小新!== 蜡笔小新 false
      return this.inputValue !== this.userInfo[this.$route.query.prop]
    }
  },
  created () {
    // 获取属性名 生成titile
    const obj = {
      nickname: '昵称',
      position: '职位',
      intro: '个人简介',
      avatar: '头像'
    }
    this.title = `修改${obj[this.$route.query.prop]}`

    // 设置显示的文本
    // 用户信息保存在vuex
    this.inputValue = this.userInfo[this.$route.query.prop]
    // 修改头像的显示
    if (this.$route.query.prop === 'avatar') {
      this.fileList[0].url = this.userInfo[this.$route.query.prop]
    }
  },
  methods: {
    ...mapMutations(['SETPROPVALUE']),
    // 返回上一页
    back () {
      this.$router.go(-1)
    },
    // 保存修改
    saveEdit () {
      // 如果没有修改 不让后续代码执行
      if (this.isEdit === false) return
      debugger
      console.log('saveEdit')
      // 修改数据即可
      // 生成一个提交的数据
      const data = {}
      // nickname intro ...  把输入的值绑定给data
      data[this.$route.query.prop] = this.inputValue
      this.$toast.loading({ duration: 0 })
      // 提交数据
      editUserInfo(data).then(res => {
        this.$toast.success('修改成功')

        // 如果是头像 修改的时候 把头像的地址提交即可
        if (this.$route.query.prop !== 'avatar') {
          // 修改vuex中的数据
          this.SETPROPVALUE({
            propName: this.$route.query.prop,
            propValue: this.inputValue
          })
        } else {
          // 图片的地址
          // 把地址存了
          this.SETPROPVALUE({
            propName: this.$route.query.prop,
            propValue: this.avatarUrl
          })
        }

        // 跳转页面
        this.$router.go(-1)
        console.log(res)
      })
    },
    // 文件读取完毕
    afterRead (fileInfo) {
      // console.log(fileInfo)
      const data = new FormData()
      data.append('files', fileInfo.file)

      uploadFiles(data).then(res => {
        console.log(res)
        // 生成头像地址
        this.avatarUrl = process.env.VUE_APP_URL + res.data[0].url
        // 保存id
        this.inputValue = res.data[0].id
      })
    }
  }
}
</script>

<style lang="less">
.editInfo {
  background-color: @white-color;
  // 设置高度 使用vh的话 ,1vh 等于 1%的屏幕高度
  // 如果用`height:100%`
  height: 100vh;
  .main-box {
    padding: 15px;
    text-align: center;
    .van-field {
      background-color: @bg-color;
      border-radius: 8px;
    }
  }
}
</style>
